﻿@page
@model AdminUI.Pages.Dialog.SelectIconFontModel
@{
    var F = Html.F();
}

@using System.Text


@section head {

    <style type="text/css">
        ul.icons {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

            ul.icons li {
                display: inline-block;
                margin: 0 2px 2px 0;
                text-align: center;
                border-style: solid;
                border-width: 1px;
                padding: 2px 2px;
                width: 100px;
            }

                ul.icons li .f-icon {
                    font-size: 16px;
                    height: 16px;
                    line-height: 16px;
                    min-width: 20px;
                    text-align: center;
                }

                ul.icons li .title {
                    margin-top: 2px;
                }

                ul.icons li .subtitle {
                    margin-top: 2px;
                }

        .mysearch {
            text-align: left;
        }

            .mysearch .f-field-textbox {
                height: 40px;
                font-size: 20px;
                line-height: 24px;
                padding: 8px 12px;
            }
    </style>

}

@section body {

    <div class="mysearch">
        <f:TextBox Width="350" EmptyText="搜索图标" ShowLabel="false" ID="tbxSearch">
            <Listeners>
                <f:Listener Event="change" Handler="onSearchBoxChange"></f:Listener>
            </Listeners>
        </f:TextBox>
    </div>
    <br />
    @{
        string LI_TEMPLATE = "<li class=\"f-state-default\" title=\"双击选择图标\"><i class=\"f-icon {0}\"></i><div class=\"subtitle\">{1}</div></li>";

        StringBuilder sb = new StringBuilder();

        string iconName = String.Empty;
        string iconClassName = "&nbsp;";

        sb.Append("<ul class=\"icons\">");
        foreach (string icon in Enum.GetNames(typeof(IconFont)))
        {
            // 以下划线开头的是IconFont字体
            if (icon.StartsWith("_"))
            {
                continue;
            }

            IconFont iconType = (IconFont)Enum.Parse(typeof(IconFont), icon);

            if (iconType != IconFont.None)
            {
                iconName = IconFontHelper.GetName(iconType);
                iconClassName = "f-icon-" + iconName;
            }

            //sb.AppendFormat(LI_TEMPLATE, iconClassName, icon, String.IsNullOrEmpty(iconName) ? "&nbsp;" : iconName);
            sb.AppendFormat(LI_TEMPLATE, iconClassName, String.IsNullOrEmpty(iconName) ? "&nbsp;" : iconName);
        }
        sb.Append("</ul>");
    }

    @Html.Raw(sb.ToString())

}


@section script {

    <script>

        function onSearchBoxChange(event) {
            var keyword = this.getValue().toLowerCase();

            $('ul.icons li').each(function () {
                var cnode = $(this), title = cnode.find('.subtitle').text().toLowerCase();

                if (title.indexOf(keyword) >= 0) {
                    cnode.show();
                } else {
                    cnode.hide();
                }
            });
        }


        F.ready(function () {
            $('ul.icons li').hover(function () {
                $(this).addClass('f-state-hover');
            }, function () {
                $(this).removeClass('f-state-hover');
            });

            $('ul.icons li').dblclick(function (e) {
                if (e.target.lastChild) {
                    var iconClass = 'f-icon-' + e.target.lastChild.textContent;

                    var activeWindow = F.getActiveWindow();
                    activeWindow.hide();
                    activeWindow.window.updateIconFontValue(iconClass);
                }
            })
        });

            ////请在调用页面定义接收方法
            //function selectedIcon(iconClass) {
            //    alert("已选择图标字体样式：" + iconClass);
            //}

    </script>

}
